<template>
  <div style="margin-bottom:55px;">
  	<div class="grids" style="background:#fff;">
      <div class="grids-item">
        <div class="zan-icon zan-icon-contact" style="color: #292929;"></div>
        <div class="grid_label">会员：{{user.name}}</div>
      </div>
      <div class="grids-item">
        <div class="zan-icon zan-icon-gold-coin" style="color: #292929;"></div>
        <div class="grid_label" v-if="user.balance>0">余额：￥{{user.balance/100}}</div>
        <div class="grid_label" v-else>余额：￥0</div>
      </div>
      <div class="grids-item">
        <div class="zan-icon zan-icon-exchange" style="color: #292929;"></div>
        <div class="grid_label">积分：{{user.points}}</div>
      </div>
    </div>
    <div style="height:10px;background: #F0F0F0"></div>
    <div class="weui-cells weui-cells_after-title">
      <radio-group @change="radioChange">
        <label class="weui-cell weui-check__label" v-for="(item,index) in rechPackages" :key="index" @click="handleIcon(index)">
          <radio class="weui-check" :value="item.id"/>
          <div class="weui-cell__bd">
            <span class="zan-font-bold">{{item.title}}</span>
            <div style="font-size:13px;color:#858A90;" v-for="(reg,regIndex) in item.recharge_gifts" :key="regIndex">赠送：{{reg.name}}</div>
          </div>
          <div v-if="num == index" class="weui-cell__ft weui-cell__ft_in-radio">
            <div class="zan-icon zan-icon-success" style="color: #292929;"></div>
          </div>
        </label>
      </radio-group>
    </div>
    <!--<div class="btn" @click="submit">立即支付</div>-->
    <div class="recharge-btn">
      <div style="width:60%;text-align:center;font-weight:bold;"><span v-if="amount">￥</span>{{amount}}</div>
      <div class="btn" @click="submit">立即支付</div>
    </div>
  </div>
</template>

<script>
import { showErrorMsg } from '@/utils/showToast'
import { mapState, mapActions ,mapGetters } from 'vuex'
import api from '@/utils/api'
export default {
  data () {
    return {
      rechPackages:[],
      num:-1,
      recharge_pkg_id:-1,
      amount:''
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'login_info'
    ])
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=wechat_recharge'
      wx.redirectTo({
        url: url
      })
      return
    }
  },
  methods: {
    async submit(){
      if (this.recharge_pkg_id <= 0) {
        showErrorMsg('请选择一个充值套餐！')
        return
      }
      let res = await api.wechatMiniRecharge({openid:this.user.open_id,recharge_pkg_id:this.recharge_pkg_id})
      if (res.code == 0) {
        let self = this
        wx.requestPayment({
           'timeStamp': res.data.timeStamp,
           'nonceStr': res.data.nonceStr,
           'package': res.data.package,
           'signType': 'MD5',
           'paySign': res.data.paySign,
           'success':function(res){
              console.log('支付成功：',res)
              api.getUserByOpenid({openid:self.login_info.openid}).then(result=>{
                console.log('result=>',result)
                if (result.code == 0) {
                  self.$store.dispatch("setUser",result.data)
                }
              })
           },
           'fail':function(res){
              console.log('支付失败：',res)
           }
        })
      }
    },
    handleIcon(index){
      this.num = index
    },
    radioChange (e) {
      this.recharge_pkg_id = e.target.value
      let rechPackage =  _.find(this.rechPackages, ['id', Number(this.recharge_pkg_id)])
      this.amount = rechPackage.amount/100
    }
  },
  async mounted () {
    this.amount = ''
    this.recharge_pkg_id = -1
    this.num = -1
    let result = await api.findRechPackage({brand_id:this.user.brand_id})
    if (result.code == 0) {
      this.rechPackages = result.data
    }
  }
}
</script>

<style >
page{
  background: #F2F2F2;
}
.grids{
  border-left:1px solid #d9d9d9;
  overflow:hidden
}
.grids-item{
  position:relative;
  float:left;
  padding:10px;
  width:33.33333333%;
  box-sizing:border-box;
  border-right:1px solid #d9d9d9 ;
}
.zan-icon {
  display:block;
  width:28px;
  height:28px;
  font-size: 24px;
  margin:5px auto
}
.grid_label{
  margin-top:5px;
  display:block;
  text-align:center;
  color:#000;
  font-size:15px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}
.weui-cells{
  position:relative;
  margin-top:1.2em;
  background-color:#fff;
  line-height:1.4;
  font-size:17px
}
.weui-cells_after-title{margin-top:0}
.weui-cell{
  padding:10px 15px;
  position:relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  align-items:center;
  border-bottom: 1px solid #F0F0F0;
}
.weui-check__label:active{background-color:#ececec}
.weui-check{position:absolute;left:-9999px}
.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.weui-cell__ft{text-align:right;color:#999}
.weui-cell__ft_in-radio{padding-left:.35em}
.btn{
  width: 40%;
  color: white;
  text-align: center;
  background: black;
}
.recharge-btn{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  background: #FFF;
  font-size: 16px;
}
</style>
